<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #container {
    width: 800px;
    height: 800px;
    border: 5px solid #ccc;
    /* 设置弹性盒子，容器所有的儿子叫做弹性项目 */
    display: flex;
    /* 主轴：指定四个方向中的一个为主轴的方向 */
    /* 右 */
    flex-direction: row;
    /* 左 */
    /* flex-direction: row-reverse; */
    /* 下 */
    /* flex-direction: column; */
    /* 上 */
    /* flex-direction: column-reverse; */

    /* 交叉轴：因为要与主轴垂直，所以只要有两个值:决定弹性项目换行的 */
    /* flex-wrap: wrap; */
    /* flex-wrap: wrap-reverse; */


    /* 设置弹性盒子在主轴上的分布 */
    /* 默认 */
    /* justify-content: flex-start; */
    /* 贴后对齐 */
    /* justify-content: flex-end; */
    /* 空间平均 */
    /* justify-content: space-around; */
    /* 居中 */
    /* justify-content: space-between; */
    justify-content: baseline;

    /* 设置弹性盒子在交叉轴上的分布 */
    /* 拉伸 */
    /* align-items: stretch; */
    /* 延起始交叉轴方向排 */
    /* align-items: flex-start; */
    /* 延起始交叉轴方向相反方向排 */
    /* align-items: flex-end */
    /* 中心 */
    align-items: center;
    /* 下沿线 */
    /* align-items: baseline; */

    /* 决定主轴在交叉轴上的分布方式 */
    /* align-content: stretch; */
    align-content: center;
    /* align-content: flex-start; */
    /* align-content: flex-end; */
    /* align-content: space-between; */
  }

  .box {
    width: 200px;
    height: 200px;
  }

  #div1 {
    background: red;
  }

  #div2 {
    font-size: 50px;
    height: 300px;
    width: 300px;
    background: orange;
    /* 改变顺序 */
    /* 大于零往后跑，小于0往前跑 */
    /* order: 1; */
    /* 默认值为0 决定容器在主轴上有剩余空间时，弹性项目占多少份*/
    flex-grow: 1;
    /* 默认为1 多出时均匀的减（一起减） */
    flex-shrink: 2;
    /* 弹性项目在主轴上所占的空间，优先级比宽，高 高 */
    flex-basis: 300px;
  }

  #div3 {
    background-color: yellow;
  }

  #div4 {
    background-color: yellowgreen;
  }

  #div5 {
    background-color: aqua;
  }

  #div6 {
    background: blue;
  }

  #div7 {
    background: purple;
  }
</style>

<body>
  <div id="container">
    <div class="box" id="div1">1</div>
    <div class="box" id="div2">2</div>
    <div class="box" id="div3">3</div>
    <div class="box" id="div4">4</div>
    <div class="box" id="div5">5</div>
    <div class="box" id="div6">6</div>
    <div class="box" id="div7">7</div>
  </div>
</body>

</html>